import React, { useCallback } from 'react'
// @ts-ignore
import Styles from './index.scss'
import BaseCell from '../base'
import WImage from '@components/global/image'
import Router from 'next/router'

interface PropsInterface {
  icon: string
  title: string
  show: string
  detail: string
  toPath?: string
  onClick?: () => void
}

export default (props: PropsInterface) => {

  const { icon, title, show, detail, toPath, onClick } = props

  const cellClick = useCallback(() => {
    onClick && onClick()
    toPath && Router.push(toPath)
  }, [])

  return (
    <BaseCell onClick={ cellClick } className={ Styles['com-global-cell-00'] }>
      <>
        <WImage lazyHeight={0} className={ Styles.icon } url={ icon } width={ 80 } height={ 80 } />
        <p className={ Styles.title }>{ title }</p>
        <p className={ Styles.show }>{ show }</p>
        <p className={ `${Styles.detail} w-text-line-2` }>{ detail }</p>
      </>
    </BaseCell>
  )
}